import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Form, RouteLayout, TabPage } from 'weaver-mobile-page';
import { Modal, ActivityIndicator, Result, Icon, Tools, ActionSheet } from 'weaver-mobile';
import CrmResult from '../card/CrmResult'
const ButtonGroup = RouteLayout.ButtonGroup;
const alert = Modal.alert;
const getLabel = Tools.getLabel;
const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
let wrapProps;
if (isIPhone) {
  wrapProps = {
    onTouchStart: e => e.preventDefault(),
  };
}

@inject('contacterFormStore')
@withRouter
@observer
export default class ContacterForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      contacterName: this.props.name,
      span: [7, 1],
      selected: "",
      visible: false,
      popoverProps: {
        onSelect: this.handleSelect,
        onVisibleChange: this.handleVisibleChange,
      },
      tabProps: {
        swipeable: true,
        onChange: (tab) => {
        }
      }
    }
  }

  componentWillMount() {
    const { contacterFormStore, match, params } = this.props;
    let ps;
    if (params) {
      ps = params;
    } else {
      ps = match.params;
    }
    contacterFormStore.doNew(this, ps);
  }

  componentDidMount() {
    const { contacterFormStore } = this.props;
    contacterFormStore.doInit();
  }

  componentWillUnmount() {
    const { contacterFormStore } = this.props;
    contacterFormStore.doClear();
  }

  render() {
    const store = this.props.contacterFormStore;
    const { initResponsed, initSuccessed, initFailedMsg, buttonProps, isView, isEdit, cancelEdit, operation, form, canEdit ,name} = store;
    const { span, visible, selected, btns, popoverProps, tabs, tabProps } = this.state;
    let buttonGroupData = [];
    buttonGroupData.push({
      key: 'clear',
      text: getLabel('201', '取消'),
      onClick: () => alert('', getLabel('390915', '确定要离开吗?'), [
        { text: getLabel('201', '取消'), onPress: () => { } },
        {
          text: getLabel('83446', '确定'),
          onPress: () => {
            if (operation === "add") {
              this.props.history.go(-1);
            } else {
              cancelEdit();
            }
          }
        },
      ])
    });
    buttonGroupData.push({
      key: 'submit',
      text: getLabel('615', '提交'),
      onClick: () => this.doSave(),
      type: 'primary',
      disabled: buttonProps.disabled,
      loading: buttonProps.loading
    });
    if (initResponsed) {
      if (initSuccessed) {
        if (operation === "view") {
          let btns = [];
          let tabs = [
            { title: name },
          ];
          if (canEdit) {
            btns = [
              <Icon type="ellipsis" onClick={this.moreClick} />,
            ];
          }
          return (
            <div>
              <TabPage
                className="tab-page-example"
                btns={btns}
                span={span}
                tabs={tabs}
                tabProps={tabProps}
                defaultTabBarProps={{ page: 4 }}
                popover={false}
                popoverProps={popoverProps}
              />
              <Form store={form} className="crm_Form" />
            </div>
          );
        } else if (operation === "edit" || operation === "add") {
          return (
            <div>
              <div className={"crm-form-main"}>
                <div className="crm-form-content">
                  <Form store={form} />
                </div>
                <ButtonGroup data={buttonGroupData} />
              </div>
            </div>
          )
        }
      } else {
        return (
          <div>
            <CrmResult
              message={initFailedMsg}
            />
          </div>);
      }
    } else {
      return <div className={"crm-bg-loading"}>
        <ActivityIndicator
          text="Loading..."
        />
      </div>;
    }
  }

  doSave() {
    const { contacterFormStore } = this.props;
    contacterFormStore.doSave();
  }
  moreClick = () => {
    const store = this.props.contacterFormStore;
    const { getEditForm, doDelete } = store;
    const buttons = [//删除客户和编辑客户只有有编辑权限的人才能操作，查看权限打开后只有一个取消按钮，所以将权限判断放在【...】上
      {
        content: getLabel('31229', '编辑联系人'),
      },
      {
        content: getLabel('81299', '删除联系人'),
      },
      {
        content: getLabel('201', '取消'),
      },
    ];
    ActionSheet.showActionSheetWithOptions({
      options: buttons,
      cancelButtonIndex: buttons.length - 1,
      maskClosable: true,
      'data-seed': 'logId',
      wrapProps,
    }, (buttonIndex) => {
      if (buttonIndex === 0) {
        getEditForm();
      }
      if (buttonIndex === 1) {
        // 删除联系人
        alert('', getLabel('83600', '您确认要删除吗？'), [
          { text: getLabel('201', '取消'), onPress: () => { } },
          { text: getLabel('83446', '确定'), onPress: () => { doDelete(); } },
        ]);
      }
    }
    )
  }
  componentWillUnmount = () => {
    window.crmContacter && window.crmContacter.doInit();
  }
}